<template>
    <page-layout>
      	<bread-crumb 
			slot="breadcrumb" 
			v-bind:breadCrumbitems="breadCrumbitems" />
        <template v-slot:pagecontent>
            <a-row class="tool-bar">
                <a-col :md=8 :sm=12>
                    <a-input-search placeholder="input search text" enter-button v-on:search="onSearch" /></a-col>
                <a-col :md=16 :sm=12>
                    <a-button type="primary" htmlType="button"><a-icon type="plus" />add</a-button>
                    <a-button type="primary" htmlType="button"><a-icon type="edit" />modify</a-button>
                    <a-button type="danger" htmlType="button"><a-icon type="delete" />remove</a-button>
                </a-col>
            </a-row>  

            <a-table
                :row-selection="{ 
                    selectedRowKeys: selectedRowKeys, 
                    onChange: onSelectChange 
                }"
                :columns="columns"
                :data-source="list"/>        
        </template>
    </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout.vue'
import BreadCrumb from '@/components/BreadCrumb.vue'
import {
    Input,
    Row,
    Col,
    Button,
    Icon,
    Table
} from 'ant-design-vue'

const columns=[{
    title:"ID",
    dataIndex:"id"
},{
    title:"Title",
    dataIndex:"title"
},{
    title:"级别",
    dataIndex:"level"
},{
    title:"简述",
    dataIndex:"summary"
},{
    title:"金额",
    dataIndex:"amountMoney"
},{
    title:"有效期",
    dataIndex:"period"
},{
    title:"确认机构",
    dataIndex:"CA"
},{
    title:"创建日期",
    dataIndex:"createData"
}]

export default {
    name:"smartcontract",
    data(){
        return {
            msg:"",
            list:[],
            columns:columns,
            selectedRowKeys:[],     //选择的行，ant design 类似的处理api  
            loading: false,     
        }
    },
    created(){ //vue-router提示在进入路由之前获取数据的写法
        this.$axios("http://localhost:8094/smartcontract/list").then((response)=>{
            if(response.status===200){
                this.list=response.data.list
            }
        })
    },
    computed:{
        breadCrumbitems(){           
            let routes = this.$route.matched	           
            return routes.map(function(item,index){
                return item.name;
            });
        }       
    },
    methods:{
        onSearch(val,evt){
            //search事件直接注入val,这就不需要v-modal
        },
        onSelectChange(selectedRowKeys){  //参数是所有选择行的数组
            this.selectedRowKeys=selectedRowKeys;
        }
    },
    components:{
        PageLayout,
        BreadCrumb,
        AInputSearch:Input.Search,
        ARow:Row,
        ACol:Col,
        AButton:Button,
        AIcon:Icon,
        ATable:Table
    }
}
</script>

<style lang="less" scoped>
    .tool-bar{
        margin:10px;
        input,button{
            margin:0 10px;
        }
    }
</style>